<!--SIDE NAV STARTS-->
<div id="side_nav">
    <div class="sideNavCategories">
        <h1>KATEGORI</h1>
        <ul class="category departments" id="sidekategori_produk">
			<li id="0"><a href="#">Semua Kategori</a></li>
			<?php
			foreach(@$kategori as $row_kategori){
			?>
				<li id="<?php echo $row_kategori->kategori_id; ?>"><a href="#"><?php echo $row_kategori->kategori_nama; ?></a></li>
			<?php
			}
			?>
        </ul>
    </div>
</div>
<!--SIDE NAV ENDS-->
<!--MAIN CONTENT STARTS-->
<div id="main_content">
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li class="active" id="navigation_kategori"></li>
		<input type="hidden" id="navigation_idkategori">
    </ul>
    <!--Toolbar-->
    <div class="toolbar">
        <div class="sortby">
            <label>Sort by :</label>
            <select id="product_topsortby">
				<option value="name">NAME</option>
                <option value="price">PRICE</option>
            </select>
        </div>
        <div class="show_no">
            <label>Show :</label>
            <select id="product_topshownumber">
            	<option value="9">9 ITEMS</option>
                <option value="12">12 ITEMS</option>
                <option value="24">24 ITEMS</option>
            </select>
        </div>
		<div>
			<button type="button" onClick="show_productbyfiltertop()" id="product_submitfiltertop" class="button_show">Show</button>
		</div>
		<div style="float:right;" id="pagination">
			<?php echo $pagination_top; ?>
		</div>
    </div>
    <!--Toolbar-->
    <!--Product List Starts-->
    <div class="products_list products_slider">
        <ul>
        <!-- All Products -->
		<?php 
		if(sizeof($all_product) > 0){
			$i=0;
			foreach ($all_product as $row){
		?>
			<li>
				<a class="product_image">
					<img src="<?php echo base_url();?>uploads/images/<?php echo $row->produk_sampul;?>" width=200 height=240 />
				</a>
				<div class="product_info">
					<h3><a href="#" onclick="view_singleproduct(<?php echo $row->produk_id;?>)"><?php echo $row->produk_nama;?></a></h3>
					<small><?php echo $row->produk_deskripsi;?></small> </div>
				<div class="price_info">
					<button class="price_add" title="" type="button" onclick="addtocart(<?php echo $row->produk_id;?>)"><span class="pr_price">Rp. <?php echo number_format($row->produk_harga,0,',','.');?></span><span class="pr_add">Add to Cart</span></button>
				</div>
			</li>
		<?php 
			}
		}
		?>
		<!-- All Products Ends -->
        </ul>
    </div>
    <!--Product List Ends-->
    <!--Toolbar-->
    <div class="toolbar">
        <div class="sortby">
            <label>Sort by :</label>
            <select id="product_bottomsortby">
				<option value="name">NAME</option>
                <option value="price">PRICE</option>
            </select>
        </div>
        <div class="show_no">
            <label>Show :</label>
            <select id="product_bottomshownumber">
            	<option value="9">9 ITEMS</option>
                <option value="12">12 ITEMS</option>
                <option value="24">24 ITEMS</option>
            </select>
        </div>
		<div>
			<button type="button" onClick="show_productbyfilterbottom()" id="product_submitfilterbottom" class="button_show">Show</button>
		</div>
		<div style="float:right;" id="pagination">
			<?php echo $pagination_bottom; ?>
		</div>
    </div>
    <!--Toolbar-->
</div>
<!--MAIN CONTENT ENDS-->
<script language="javascript">
	var addtocart = null;
	var show_productbypage = null;
	var view_singleproduct = null;
</script>
<script type="text/javascript">
$(document).ready(function(){
	/* VARIABLE STARTS */
	my_config['main_content'] = $("#main_content");
	my_config['catsweatersid'] = $("#catsweatersid");
	/* VARIABLE ENDS */
	
	/* ACTION HANDLER STARTS */
	my_config.catsweatersid.click(function(){
		my_config.main_content.load('index.php/c_catproduct');
	});
	function addcart(pid){
		$.ajax({
			url : 'index.php/c_product/addtocart',
			type : 'POST',
			dataType : 'json',
			data : {
				pid : pid,
				q : '1'
			},success : function(data){
				var sum_item = $("#cart_sumitem").text();
				var sum_itemprice = $("#cart_sumprice").text();
				var list_item = $("#cart_listofitems").html();
				var new_sumitem = eval(sum_item) + 1;
				var new_sumitemprice = eval(sum_itemprice) + eval(data[0].produk_harga);
				var new_listitem = '<li><img width="82" height="82" src="<?php echo base_url(); ?>uploads/images/' + data[0].produk_sampul + '"><a href="#">' + data[0].produk_nama + '</a> <span class="price">Rp. ' + data[0].produk_harga + '</span></li>';
				$("#cart_sumitem").empty();
				$("#cart_sumprice").empty();
				$("#cart_listofitems").empty();
				$("#cart_subtotal").empty();
				$("#cart_sumitem").text(new_sumitem);
				$("#cart_sumprice").text(new_sumitemprice);
				$("#cart_listofitems").html(new_listitem + list_item);
				$("#cart_subtotal").text(new_sumitemprice);
			}
		});
	}
	addtocart = addcart;
	$("#sidekategori_produk li").click(function(){
		var item = this;
		var kat_name = $("#sidekategori_produk #" + item.id).find("a").text();
		$(".must_empty").empty();
		my_config.main.empty();
		my_config.main.load('index.php/c_product/index?kategori=' + item.id, function(){
			$("#navigation_kategori").text(kat_name);
			$("#navigation_idkategori").text(item.id);
			$("#navigation_idkategori").val(item.id);
		});
	});
	function show_productbyfiltertopjq(){
		var sortby = $("#product_topsortby").val();
		var kategori = $("#navigation_idkategori").val();
		var kategori_name = $("#navigation_kategori").text();
		var show_number = $("#product_topshownumber").val();
		$(".must_empty").empty();
		my_config.main.empty();
		my_config.main.load('index.php/c_product/index?kategori=' + kategori + "&sort=" + sortby + "&shownumber=" + show_number, function(){
			$("#navigation_kategori").text(kategori_name);
			$("#navigation_idkategori").text(kategori);
			$("#product_topsortby").val(sortby);
			$("#product_topshownumber").val(show_number);
			$("#product_bottomsortby").val(sortby);
			$("#product_bottomshownumber").val(show_number);
			$("#product_page0top").removeClass();
			$("#product_page0top").addClass("aktif");
			$("#product_page0bottom").removeClass();
			$("#product_page0bottom").addClass("aktif");
		});
	};
	show_productbyfiltertop = show_productbyfiltertopjq;
	function show_productbyfilterbottomjq(){
		var sortby = $("#product_bottomsortby").val();
		var kategori = $("#navigation_idkategori").val();
		var kategori_name = $("#navigation_kategori").text();
		var show_number = $("#product_bottomshownumber").val();
		$(".must_empty").empty();
		my_config.main.empty();
		my_config.main.load('index.php/c_product/index?kategori=' + kategori + "&sort=" + sortby + "&shownumber=" + show_number, function(){
			$("#navigation_kategori").text(kategori_name);
			$("#navigation_idkategori").text(kategori);
			$("#product_topsortby").val(sortby);
			$("#product_topshownumber").val(show_number);
			$("#product_bottomsortby").val(sortby);
			$("#product_bottomshownumber").val(show_number);
			$("#product_page0top").removeClass();
			$("#product_page0top").addClass("aktif");
			$("#product_page0bottom").removeClass();
			$("#product_page0bottom").addClass("aktif");
		});
	};
	show_productbyfilterbottom = show_productbyfilterbottomjq;
	function show_productbypagejq(page){
		var sortby = $("#product_bottomsortby").val();
		var kategori = $("#navigation_idkategori").val();
		var kategori_name = $("#navigation_kategori").text();
		var show_number = $("#product_bottomshownumber").val();
		var start = page * show_number;
		$(".must_empty").empty();
		my_config.main.empty();
		my_config.main.load('index.php/c_product/index?kategori=' + kategori + "&sort=" + sortby + "&shownumber=" + show_number + "&start=" + start, function(){
			$("#navigation_kategori").text(kategori_name);
			$("#navigation_idkategori").text(kategori);
			$("#product_topsortby").val(sortby);
			$("#product_topshownumber").val(show_number);
			$("#product_bottomsortby").val(sortby);
			$("#product_bottomshownumber").val(show_number);
		});
	}
	show_productbypage = show_productbypagejq;
	function view_singleproduk(pid){
		my_config.main.load('index.php/c_singleproduct?product_id=' + pid);
		return false;
	}
	view_singleproduct = view_singleproduk;
	/* ACTION HANDLER ENDS */
});
</script>